<template>
  <div class="settings-center">
    <!-- 打车偏好设置 -->
    <van-cell-group inset>
      <!-- 添加 value 属性 -->
      <van-cell title="常用上车点" is-link to="/usersettings" value="示例上车点地址">
        <template #icon>
          <van-icon name="location" />
        </template>
      </van-cell>
      <!-- 添加自定义类名 -->
      <van-cell class="custom-left-margin" title="偏好车型" is-link to="/usersettings">
        <template #icon class="image">
          <!-- 使用 img 标签展示自定义图片 -->
          <img src="../assets/setting/car1.png" style="width: 22px; height: 22px; margin-right: 10px;" />
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 支付与优惠设置 -->
    <van-cell-group inset>
      <!-- 添加 value 属性 -->
      <!-- 添加自定义类名 -->
      <van-cell class="custom-left-margin" title="支付方式管理" is-link to="/usersettings" value="微信支付">
        <template #icon class="image">
          <img src="../assets/setting/zffs.png" style="width: 22px; height: 22px; margin-right: 10px;" />
        </template>
      </van-cell>
      <!-- 添加 value 属性 -->
      <van-cell title="优惠券管理" is-link to="/usersettings" value="3 张">
        <template #icon>
          <van-icon name="coupon" />
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 乘车服务设置 -->
    <van-cell-group inset>
      <van-cell title="乘车人信息" is-link to="usersettings/">
        <template #icon>
          <van-icon name="contact" />
        </template>
      </van-cell>
      <van-cell title="乘车备注设置" is-link to="/usersettings">
        <template #icon>
          <van-icon name="comment" />
        </template>
      </van-cell>
      <!-- 修复后的代码 -->
      <!-- 添加自定义类名 -->
      <van-cell class="custom-left-margin" title="风格转换">
        <template #icon class="image">
          <img src="../assets/setting/fg.png" style="width: 22px; height: 22px; margin-right: 10px;" />
        </template>
        <template #right-icon>
          <van-switch v-model="childSeatToggle" active-color="orange" />
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 通知与提醒设置 -->
    <van-cell-group inset>
      <van-cell title="订单通知设置" is-link to="/usersettings">
        <template #icon>
          <van-icon name="bell" />
        </template>
      </van-cell>
      <van-cell title="司机接单提醒" is-link to="/usersettings">
        <template #icon>
          <van-icon name="volume" />
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 帮助与反馈设置 -->
    <van-cell-group inset>
      <van-cell title="常见问题解答" is-link to="/usersettings">
        <template #icon>
          <van-icon name="question" />
        </template>
      </van-cell>
      <van-cell title="反馈与建议" is-link to="/usersettings">
        <template #icon>
          <van-icon name="chat" />
        </template>
        <template #description>帮助我们提升服务</template>
      </van-cell>
      <!-- 新增退出登录按钮 -->
      <van-button type="default"  color="var(--gradient-primary)" block @click="logout">退出登录</van-button>
    </van-cell-group>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';
import { useRouter } from 'vue-router';
const router = useRouter();
// 新增退出登录方法
const logout = () => {
  localStorage.removeItem('token'); // 清除token
  localStorage.removeItem('username');
  showToast('已退出登录');
  router.push('/'); 
}
// 专门为儿童座椅开关创建状态
const childSeatToggle = ref(true); 
</script>

<style scoped>
.settings-center {
  margin-top: 20px;
}

.settings-center .van-cell-group {
  margin-bottom: 15px;
}

.van-icon {
  font-size: 22px;
  color: orange;
  margin-right: 10px;
}

.custom-left-margin {
  margin-right: 20px;
}
</style>